<template>
  <el-row :gutter="5">
    <el-col :span="7">
      <app-card>
        <template #header>
          <select-customer></select-customer>
        </template>
        <el-tabs :stretch="true" type="border-card">
          <el-tab-pane label="聊天记录">
            <friend-user></friend-user>
          </el-tab-pane>
          <el-tab-pane label="用户列表">
            <all-user></all-user>
          </el-tab-pane>
        </el-tabs>
      </app-card>
    </el-col>
    <el-col :span="12">
      <app-card v-if="activeUser">
        <template #header>
          <div class="chatTitle">
            <div>
              <el-button icon="Delete" @click="removeUserItem">取消聊天</el-button>
            </div>
            <div>
              <app-avatar :size="30" :src="activeUser.avatarUrl"></app-avatar>
              <span>【{{ activeUser.nickName }}】</span>
            </div>
            <div></div>
          </div>
        </template>
        <chat-view></chat-view>
      </app-card>
    </el-col>
    <el-col :span="5">
      <app-card>
        <template #header>
          <div class="handleMsg">
            <span>客户： <strong>{{ $store.state.customer.pendingUser }}</strong></span>
            <span>消息： <strong>{{ $store.state.customer.pendingMessage }}</strong></span>
          </div>
        </template>
        <customer-message></customer-message>
      </app-card>
    </el-col>
  </el-row>
</template>

<script setup lang="ts">
import SelectCustomer from "@/views/customer/chat/component/selectCustomer.vue";
import CustomerMessage from "@/views/customer/chat/component/customerMessage.vue";
import AllUser from "@/views/customer/chat/component/allUser.vue";
import ChatView from "@/views/customer/chat/component/chatView.vue";
import FriendUser from "@/views/customer/chat/component/friendUser.vue";
import {computed} from "vue";
import {store} from "@/store";
import {IChatUser} from "@/types/store/customer";
import {removeRelation} from "@/api/customer";
import {ElMessage, ElMessageBox} from "element-plus";

const activeUser = computed<IChatUser>(() => {
  return store.state.customer.activeUser!
})

// 移除关系
const removeUserItem = () => {
  ElMessageBox.confirm(
      '是否取消当前用户聊天！',
      '提醒', {confirmButtonText: '确认', cancelButtonText: '取消',})
      .then(async () => {
        await removeRelation({openId: store.state.customer.user.openId!, username: activeUser.value.username!})
        const index = store.state.customer.friendList?.findIndex((i) => i.username === activeUser.value.username!)
        store.state.customer.friendList?.splice(index!, 1)
        ElMessage.info('取消成功！')
      })
}

</script>

<style lang="scss" scoped>
::v-deep(.el-tabs__content) {
  padding: 0px;
}

div.handleMsg {
  font-size: 16px;
  color: #353638;
  height: 40px;
  display: flex;
  align-items: center;

  & > span {
    &:nth-child(2) {
      margin-left: 30px;
    }

    strong {
      color: #4d42e3;
    }
  }
}

div.chatTitle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 40px;
  width: 100%;

  & > div {
    flex: 1;

    &:nth-child(1) {
      text-align: left;
    }

    &:nth-child(2) {
      text-align: center;
      color: #323234;
      font-size: 20px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

}

/** 卡片title */
::v-deep(.el-space) {
  width: 100%;

  & > .el-space__item {
    width: 100%;
  }
}
</style>

<style lang="scss">

</style>